<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>账户设置</title>
	<link rel="stylesheet" type="text/css" href=" ../../../css/api.css" />
	<style>
		body {
			padding-bottom: 15px;
		}

		#app .header {
			width: 100%;
			height: 44px;
			line-height: 44px;
			text-align: center;
			position: relative;
			background-color: #ffffff;
			font-size: 16px;
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#app .header img {
			width: 22px;
			height: 22px;
		}

		#app .header img:first-child {
			position: absolute;
			left: 15px;
		}

		#app .info {
			border-radius: 10px;
			width: 100%;
			padding: 0 15px;
			background-color: #ffffff;
			box-sizing: border-box;
			margin-bottom: 10px;
		}

		#app .info .info_one .one_ {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px 0;
			box-sizing: border-box;
			border-bottom: 1px solid #f5f5f5
		}

		#app .info .info_one .one_:last-child {
			border-bottom: 0;
		}

		#app .info .info_one .one_ .one_left {
			font-size: 16px;
			color: #000000;
		}

		#app .info .info_one .one_ .one_left div:first-child {
			font-size: 16px;
			color: #000000;
			line-height: 16px;
			margin-bottom: 10px;
		}

		#app .info .info_one .one_ .one_left div:last-child {
			font-size: 11px;
			color: #999999;
			line-height: 11px;
		}

		#app .info .info_one .one_ img {
			width: 5.5px;
			height: 10px;
		}

		#app .info .info_one .one_ img.my_pic {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-right: 10px;
		}

		#app .info .info_one .one_ div {
			font-size: 16px;
			color: #999;
			margin-right: 10px;
		}

		#app .info .info_one .one_ .one_right {
			display: flex;
			align-items: center;
		}

		#app .btn {
			border-radius: 10px;
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 16px;
			color: #000000;
			background-color: #ffffff;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="header">
			<img src=" ../../../image/icon_return.png" alt="" onclick="back()">
			账户设置
		</div>
		<div class="info">
			<div class="info_one wx">

			</div>
		</div>
		<div class="info">
			<div class="info_one">
				<div class="one_">
					<div class="one_left">微信</div>
					<div class="one_right">
						<div>已绑定</div>
					</div>
				</div>
				<div class="one_" onclick="bind_alipay()">
					<div class="one_left">支付宝</div>
					<div class="one_right">
						<div class="alipay">未绑定</div>
						<img src="../../../image/icon_more.png" alt="">
					</div>
				</div>
				<div class="one_" onclick="wechart_details()">
					<div class="one_left">
						<div>团队管理微信</div>
						<div>便于您的粉丝和推荐人联系您</div>
					</div>
					<div class="one_right">
						<div class="wx_id">未绑定</div>
						<img src="../../../image/icon_more.png" alt="">
					</div>
				</div>
			</div>
		</div>
		<div class="info">
			<div class="info_one">
				<div class="one_" onclick="changePhone()">
					<div class="one_left">手机号</div>
					<div class="one_right">
						<div class="mobile">未绑定</div>
						<img src="../../../image/icon_more.png" alt="">
					</div>
				</div>
				<div class="one_" onclick="clearCache()">
					<div class="one_left">
						清除缓存
					</div>
					<div class="one_right">
						<div class="size">0MB</div>
						<img src="../../../image/icon_more.png" alt="">
					</div>
				</div>
				<div class="one_" onclick="about_us()">
					<div class="one_left">
						关于我们
					</div>
					<div class="one_right">
						<img src=" ../../../image/icon_more.png" alt="">
					</div>
				</div>
			</div>
		</div>
		<div class="btn" onclick="outLogin()">退出登录</div>
	</div>
</body>
<script type="text/javascript" src=" ../../../script/api.js"></script>
<script type="text/javascript">
	apiready = function () {
		resume("setting");

		$api.dom('.info').style.paddingTop = $api.fixStatusBar($api.dom('.header')) + 'px';

		getMemberInfo();
		getCacheSize();

		api.addEventListener({
			name: 'viewappear'
		}, function (ret, err) {
			getMemberInfo();
			getCacheSize();
		});

	};

	function getMemberInfo() {
		$api.ajax({
			url: 'api/member/info',
			method: 'get',
		}, function (ret) {
			api.setGlobalData({
				key: 'member_info',
				value: ret.data.info,
			});
			let member_info = ret.data.info;
			if (member_info.mobile) {
				$api.html($api.dom(".mobile"), member_info.mobile);
			}
			if (member_info.alipay_logon_id) {
				$api.html($api.dom(".alipay"), member_info.alipay_logon_id);
			}
			if (member_info.wx_id) {
				$api.html($api.dom(".wx_id"), member_info.wx_id);
			}

			let html = `<div class="one_">
					<div class="one_left">头像</div>
					<div class="one_right">
						<img class="my_pic" src="`+ member_info.avatar_url + `" alt="" onerror="showDefaultImg(this)">
						<!-- <img src=" ../../../image/icon_more.png" alt=""> -->
					</div>
				</div>
				<div class="one_">
					<div class="one_left">昵称</div>
					<div class="one_right">
						<div>`+ member_info.nick_name + `</div>
						<!-- <img src=" ../../../image/icon_more.png" alt=""> -->
					</div>
				</div>`
			$api.html($api.dom(".wx"), html);
		});
	}

	function getCacheSize() {
		let size = api.getCacheSize({
			sync: true
		});
		$api.html($api.dom(".size"), (size / 1024 / 1024).toFixed(2) + "MB");
	}

	function clearCache() {
		api.clearCache(function () {
			api.toast({
				msg: '清除完成'
			});
		});
		getCacheSize()
	}

	function back() {
		api.closeWin({
		});
	}

	function bind_alipay() {
		api.openTabLayout({
			name: 'bind_alipay',
			url: './bind_alipay.html',
			useWKWebView: true,
			bgColor: '#fff',
		})
	}

	function wechart_details() {
		api.openTabLayout({
			name: 'wechart_details',
			url: './wechart_details.html',
			useWKWebView: true,
			bgColor: '#fff',
		})
	}

	function changePhone() {
		api.openTabLayout({
			name: 'changePhone',
			url: './changePhone.html',
			useWKWebView: true,
			bgColor: '#fff',
		})
	}

	function about_us() {
		api.openTabLayout({
			name: 'about_us',
			url: './about_us.html',
			useWKWebView: true,
			bgColor: '#fff',
		})
	}

	function outLogin() {
			$api.setStorage('token', '')
			var aliBC = api.require('aliBC');
			aliBC.logout(function (ret, err) {
					if (ret.status) {
							api.toast({
									msg: "注销成功",
									duration: 2000,
									location: 'middle'
							});
					}
			});
			api.execScript({
					name: 'root',
					script: "openFrameFun('home','home_main','./html/home/main.html')"
			});
			api.closeToWin({
				name: 'root'
			});
	}
</script>

</html>
